<template>
  <div id="app">
    <div class="w1200" id="pageBox" v-if="showMenu">
      <menu-left/>
      <router-view/>
    </div>
    <router-view v-if="!showMenu"/>
<!--    <cps-header/>-->
<!--    <cps-footer/>-->
    <load-view v-if="showLoading"/>
  </div>
</template>
<script>
  import { loadJs } from  './common/js/common';//创建网页头部 尾部的js
  const hideMenus = [
    //需要隐藏个人中心menu菜单的页面
    '/login','/register', '/forgetLoginPws' , '/machinemarket' ,'/classicMachinePay' , '/fastMachinePay','/classicDetail' , '/fastMachineDetail' ,
    '/classicMachineDetail' , '/paymentSuccessful'
  ];
  loadJs();
  export default {
    name: 'App',
    data() {
      return {
        showLoading: false,
        showMenu : false
      }
    },
    watch:{
      '$store.state.reloadHeader'( reload ){
        //登录后 / 退出登录 ，需要重新加载头部尾部JS
        if(reload){
          loadJs();
          this.$store.commit('reloadHeader', false);
        }
      },
      '$store.state.loading'() {
        //loading
        this.showLoading = this.$store.state.loading;
      },
      '$store.state.gologin'(status) {
        //强制跳转登录
        if (status) {
          this.$router.replace({path: 'login'});
          this.$store.commit('gologin', false);
          loadJs();
        }
      },
      '$route.path'(path){
        //是否限制个人中心的menu部分
        this.showMenu =  hideMenus.indexOf(path) === -1 ? true : false;
      }
    },
    components: {
      // CpsHeader : resolve => { require(['./components/header'], resolve) }, /*header*/
      // CpsFooter : resolve => { require(['./components/footer'], resolve) }, /*footer*/
      LoadView :  resolve => { require(['./components/loading'], resolve) }, /*loading*/
      MenuLeft :  resolve => { require(['./components/MenuLeft'], resolve) }, /*menu*/
    },
    provide() {
      return {
        reload: this.reload, //inject : ['reload'] ； this.reload()，可以刷新当前页
      }
    },
    methods:{
      reload() {
        this.isRouterAlive = false;
        this.$nextTick(function () {
          this.isRouterAlive = true
        })
      }
    },
  }
</script>

<style>
  html,body{
    background: #f5f5f5!important;font-size: 14px;font-family: 'MicrosoftYaHei','PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;padding: 0;margin: 0;
  }
  #pageBox{
    overflow: hidden;
  }
  body{color: #262626;}
  body>iframe{
    bottom: 0!important;
  }
  #contentRight{
    width: 1042px;float: right;padding-top: 102px;padding-bottom: 150px;min-height: 725px;
  }
  #contentRight>section{
  border-radius: 4px;background: #fff;padding: 25px;
  }
  #contentRight .guide{
    font-size: 16px;
  }
  #contentRight .guide>a{
    color: #FFAB32;
  }
  #contentRight .guide span{
    color: #262626;
  }
  body::-webkit-scrollbar {width:0px; height:0px; background-color:transparent;}
  body::-webkit-scrollbar-track {background-color:#fff; border-radius:0px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0);}
  body::-webkit-scrollbar-thumb {background-color:#fff; border-radius:0px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0);}
  body,html{
    -ms-overflow-style: none;
    /*火狐下隐藏滚动条*/
    scrollbar-width: none;
  }
  /*body::-scrollba*/
  p,span,div,a,header,footer,ul,li,section{line-height: 103%;text-decoration: none;box-sizing: border-box;padding: 0;margin: 0;vertical-align: middle;}
  a{color: #fff;box-sizing: border-box;}
  button, input, optgroup, select, textarea {
    font-family: inherit;font-size: 100%;line-height: 100%;margin: 0;box-sizing: border-box;
  }
  ul,li{
    list-style: none;margin: 0;padding: 0;box-sizing: border-box;
  }
  #app{width: 100%;margin: 0 auto;}
  .toastStyle{background-color:#000!important;padding: 18px 20px!important;}
  .toastStyle>span{color: #fff!important;font-size: 17px!important;}
  input{background: #fff;border:1px solid#f5f5f5;}
  input[type=number]{appearance: none;-moz-appearance:textfield!important;}
  input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{-webkit-appearance: none;margin: 0;}
  input,button,textarea,select{outline: none;border:none;margin:0;-webkit-tap-highlight-color: rgba(240,240,240,0);padding:0;}
  button:hover,select:hover{cursor: pointer}
  button:disabled:hover,input:disabled:hover,select:disabled:hover{cursor: not-allowed}
  ul,ul li{list-style: none}
  a:link,a:visited,a:hover,a:active{text-decoration: none;-webkit-tap-highlight-color: rgba(0,0,0,0);color: #262626;text-align: center;display: inline-block}
  a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
  input::-webkit-input-placeholder{color:#AFB2B8;font-size: 14px;font-family: 'MicrosoftYaHei', 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;}
  input::-moz-placeholder {color:#AFB2B8;font-size: 14px;font-family: 'MicrosoftYaHei', 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;}
  input:-ms-input-placeholder{color:#AFB2B8;font-size: 14px;font-family:'MicrosoftYaHei', 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;}
  input{font-family: 'MicrosoftYaHei','PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;font-size: 16px;color: #262626}
  input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;appearance: none;margin: 0;
  }
  input[type=number]{-moz-appearance:textfield;}
  .cover{
    position: fixed;z-index: 3;background: rgba(0,0,0,0.3);width: 100%;height: 100%;left: 0;top:0
  }
  .boxshadow{
    box-shadow: 0px 0px 15px #e7e5e5;-moz-box-shadow: 0px 0px 15px #e7e5e5;-web-kit-shadow: 0px 0px 15px #e7e5e5;
  }
</style>
<style>
  .scale-enter-active {
    animation-name: scaleInUp;
    animation-duration: 0.2s;
    animation-fill-mode: both;
  }
  .scale-leave-active {
    animation-name: scaleOutDown;
    animation-duration: 0.2s;
    animation-fill-mode: both;
  }
  .delay-leave-active {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    animation-delay: 0.2s;
  }
  @keyframes scaleInUp {
    0% {
      transform: scale(0);
      -webkit-transform: scale(0);
      visibility: visible;
      opacity: 0;
    }
    to {
      transform: scale(1);
      -webkit-transform: scale(1);
      opacity: 1;
    }
  }
  @keyframes scaleOutDown {
    0% {
      transform:scale(1);
      -webkit-transform: scale(1);
      opacity: 1;
    }
    to {
      visibility: hidden;
      opacity: 0;
      transform: scale(0);
      -webkit-transform: scale(0);
    }
  }
/*-----------*/
  .slide-enter-active {
    animation-name: slideInUp;
    animation-duration: 0.2s;
    animation-fill-mode: both;
  }
  .slide-leave-active {
    animation-name: slideOutDown;
    animation-duration: 0.2s;
    animation-fill-mode: both;
  }
  @keyframes slideInUp {
    0% {
      transform: translate3d(0, -100%, 0) translateY(-50%) rotateX(-90deg);
      visibility: visible;
      opacity: 0;
    }
    to {
      transform: translateZ(0) translateY(-50%) rotateX(0deg);
      opacity: 1;
    }
  }
  @keyframes slideOutDown {
    0% {
      transform: translateZ(0) translateY(-50%)  rotateX(0deg);
      opacity: 1;
    }
    to {
      visibility: hidden;
      opacity: 0;
      transform: translate3d(0, -100%, 0) translateY(-50%)  rotateX(-90deg);
    }
  }
  .delay-leave-active {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    animation-delay: 0.2s;
  }
  /*-----------折叠展开动画----------*/
  .open-enter-active, .open-leave-active {
    transition: all 0.5s ease;
  }
  .open-enter, .open-leave-to /* .fade-leave-active below version 2.1.8 */ {
    height: 0;
  }

</style>
<style lang="less">
  body /deep/ .el-select-dropdown{
    z-index: 2!important;
  }
  /*body .el-pagination.is-background .el-pager li:not(.disabled):hover , body .el-pagination.is-background .el-pager li:not(.disabled).active{*/
  /*  background: #FFAB32;color: #fff;*/
  /*}*/
</style>
